<!doctype html>

<html lang="en" xmlns:th = "http://www.thymeleaf.org">
   
   
    <head>


        <!-- META -->
        <meta charset="utf-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <!-- PAGE TITLE -->
        <title>设备维修系统</title>

        <!-- FAVICON -->
        <link rel="shortcut icon" href="/assets/img/icon.png">

        <!-- FONTS -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&amp;subset=latin-ext" rel="stylesheet">

        <!-- STYLESHEETS -->
        <link rel="stylesheet" type="text/css" href="/assets/css/plugins.css">
        <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
        <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.min.css">


    </head>


    <body>
    
       
        <!-- PRELOADER -->
        <div class="preloader">
           
            <!-- SPINNER -->
            <div class="spinner">
             
              <div class="bounce-1"></div>
              <div class="bounce-2"></div>
              <div class="bounce-3"></div>
              
            </div>
            <!-- /SPINNER -->
            
        </div>
        <!-- /PRELOADER -->


        <!-- HERO -->
        <div class="hero">


            <!-- FRONT CONTENT -->
            <div class="front-content">


                <!-- CONTAINER MID -->
                <div class="container-mid">


                    <!-- ANIMATION CONTAINER -->
                    <div class="animation-container animation-fade-down" data-animation-delay="0">
                       
                        <img class="img-responsive logo" src="/assets/img/icon.png" alt="image">
                        
                    </div>
                    <!-- /ANIMATION CONTAINER -->
                    
                    
                    <!-- ANIMATION CONTAINER -->
                    <div class="animation-container animation-fade-right" data-animation-delay="300">
                        
                        <h1>系统登陆</h1>
                        
                    </div>
                    
                    
                    <!-- ANIMATION CONTAINER -->
                    <div class="animation-container animation-fade-left" data-animation-delay="600"> 
                       
                        <p class="subline">设备维修系统</p>
 	        <p class="subline">解救故障设备于水火</p>
                        
                    </div>
                    <!-- /ANIMATION CONTAINER -->
                    

                    <!-- ANIMATION CONTAINER -->
                    <div class="animation-container animation-fade-up" data-animation-delay="900"> 
                       
                         <div class="open-popup" id="client"  >职员登录</div>
                         <div class="open-popup" id="employee">工人登录</div>
	         <div class="open-popup" id="admin">管理员登录</div>
                    </div>
                    <!-- /ANIMATION CONTAINER -->
                    

                </div>
                <!-- /CONTAINER MID -->


                <!-- FOOTER -->
                <div class="footer">
                    

                    <!-- ANIMATION CONTAINER -->
                    <div class="animation-container animation-fade-up" data-animation-delay="1200">
                       
                     
                    </div>
                    <!-- /ANIMATION CONTAINER -->
                    

                </div>
                <!-- /FOOTER -->


            </div>
            <!-- /FRONT CONTENT -->


            <!-- BACKGROUND CONTENT -->
            <div class="background-content parallax-on">

                <div class="background-overlay"></div>
                <div class="background-img layer" data-depth="0.05"></div>
                
            </div>
            <!-- /BACKGROUND CONTENT -->


        </div>
        <!-- /HERO -->
        
        
        <!-- POPUP ( SUBSCRIBE ) -->
        <div   class="popup">
           
           
            <!-- CARD -->
            <div class="card">
                    
                    
                    <!-- CARD CLOSE BUTTON -->
                    <div class="close-popup close-button"></div>
                    <img  id="popImage" src="/assets/img/worker1.png"  height="100" width="100" alt="image" >
                    <!--i class="fa fa-envelope-o" aria-hidden="true"--><!--/i-->
                    <h3 id="title3"></h3>
                   
                   
                    <!-- FORM -->
                    <form action="#" method="get" class="subscribe-form" id="InfoForm" onsubmit="return false">

                       
                        <input type="text" name="CId" placeholder="* 请输入ID" onfocus="this.placeholder = ''" onblur="this.placeholder = '* 请输入ID'" class="email form-control">
 	                    <input type="password" name="CPwd" id="CPwd" placeholder="* 请输入密码" onfocus="this.placeholder = ''" onblur="this.placeholder = '* 请输入密码'" class="email form-control">

                        <!-- PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) DO NOT REMOVE -->
                        <!--<div class="fhp-input"><input type="text" name="phone" placeholder="* 请输入ID登录!" class="email form-control"></div>-->
                        <!-- /PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) DO NOT REMOVE -->

                        <button type="submit" class="btn btn-primary form-control" style="background-color:#d4237a" onclick="submitBtnClick()"><a onclick="submitBtnClick()">登 录</a><i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
                        
                        <!-- SUCCESS-ERROR MESSAGE -->

<!--                        <div class="success-message">* 登录成功!</div>-->
                        <!-- /SUCCESS-ERROR MESSAGE -->
                        

                    </form>
                    <!-- /FORM -->
                <div class="error-message">
                    <h5 th:text="${msg}"></h5>
                </div>
                
            </div>
            <!-- /CARD -->
            
            
        </div>
        <!-- /POPUP ( SUBSCRIBE ) -->


        <!-- JAVASCRIPTS -->
        <script type="text/javascript" src="/assets/js/plugins.js"></script>
        <script type="text/javascript" src="/assets/js/main.js"></script>
        <script type="text/javascript" src="/assets/js/md5.js"></script>
        <script type="text/javascript">
            function submitBtnClick(){
                // 序列化查询参数
                var paramData = $("#InfoForm", window.parent.document).serializeArray();
                    // 使用ES5功能替换字段(进行加密)
                paramData.forEach(function (item) {
                    if (item.name === 'CPwd') {
                        if(null != item.value){
                            item.value = $.md5(item.value);
                        }
                    }
                });
                // 将数组转化为字符串序列
                var param =  $.param(paramData);
                window.location.href=$("#InfoForm").attr("action")+'?'+param;

            }
            </script>


    </body> 
    
    
</html>